<template>
  <div class="root">
    <div class="mianbox">
      <Nav></Nav>
    </div>
    <div class="bigContent">
      <div class="contentBox">
        <div class="rightBox">
          <el-card class="box-card">
            <div class="headerBox">
              <div
                class="back"
                @click="
                  $router.push({
                    path: '/HelpCenter',
                    query: {
                      index: $route.query.index,
                    },
                  })
                "
                style="cursor: pointer"
              >
                <img
                  src="@/assets/image/help/back.png"
                  class="iconBox"
                  alt=""
                />
                返回
              </div>
              <!-- <img src="@/assets/image/help/my.png" class="imgBOX" alt="" /> -->
              {{ detailsData.name }}
            </div>
            <el-divider></el-divider>
            <div class="newContent" style="display: block">
              <div class="longtext" v-html="detailsData.value"></div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <bottom></bottom>
  </div>
</template>
  
  <script>
import Search from "@/components/Search/Search.vue";
import Nav from "@/components/Nav/Nav";
import bottom from "@/components/bottom";
import { selectSystemSettingInfoById } from "@/api/HelpCenter";
export default {
  components: { Nav, bottom, Search },
  data() {
    return {
      detailsData: {},
    };
  },
  created() {
    this.selectSystemSettingInfoById();
  },
  methods: {
    selectSystemSettingInfoById() {
      selectSystemSettingInfoById({
        id: this.$route.query.id,
      }).then((data) => {
        this.detailsData = data.data;
      });
    },
  },
};
</script>
  
  <style scoped lang="scss">
.root {
  background: #fff;
  font-size: 12px;
  /deep/ .el-card {
    overflow: initial;
  }
  .mianbox {
    margin: 0 auto;
    width: 12rem;
    height: 100%;
  }

  .bigContent {
    background: #f5f7f9;
    padding: 0.2rem 0;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1) inset;
  }
  .contentBox {
    width: 60%;
    margin: auto;
    border-radius: 4px;
    display: flex;
    .listBox {
      width: 1.5rem;
      height: 0.46rem;
      line-height: 0.46rem;
      text-align: center;
      font-size: 0.14rem;
      cursor: pointer;
    }
    .newBox {
      color: #e22a1f;
    }
    .rightBox {
      flex: 1;
      margin-left: 0.2rem;
      .headerBox {
        display: flex;
        align-items: center;
        font-size: 0.18rem;
        font-weight: 700;
        .back {
          width: 66px;
          height: 30px;
          margin-right: 20px;
          background: #e22a1f;
          color: #fff;
          border-top-left-radius: 20px;
          border-bottom-left-radius: 20px;
          align-items: center;
          line-height: 30px;
          font-size: 14px;
          .iconBox {
            width: 18px;
            height: 18px;
            vertical-align: middle;
            margin-left: 7px;
            margin-right: 2px;
          }
        }
        .imgBOX {
          width: 0.24rem;
          height: 0.24rem;
          margin-right: 0.1rem;
        }
      }
      .newContent {
        display: flex;
        justify-content: space-between;
        padding: 0.2rem;
        min-height: 50vh;
        .box {
          width: 30%;
          margin-top: 0.4rem;
          .contents {
            position: relative;
            padding-top: 0.5rem;
            .imgBoxs {
              width: 0.92rem;
              height: 0.92rem;
              position: absolute;
              top: -0.6rem;
              left: 30%;
            }
            .titleBox {
              font-weight: 700;
              font-size: 0.18rem;
              text-align: center;
            }
            .textBox {
              font-size: 0.14rem;
              color: #666666;
              text-align: center;
              margin-top: 0.1rem;
            }
            .newIconBox {
              display: flex;
              justify-content: center;
              .iconImg {
                width: 0.48rem;
                height: 0.48rem;
                margin-top: 0.3rem;
              }
            }
            .redText {
              color: #e22a1f;
              font-size: 0.28rem;
              text-align: center;
              font-weight: 500;
              margin-top: 0.3rem;
            }
            .timeBox {
              color: #999999;
              font-size: 0.12rem;
              text-align: center;
              margin-top: 0.1rem;
            }
            .erwerima {
              width: 1.34rem;
              height: 1.34rem;
              margin-top: 0.2rem;
            }
          }
        }
        .newList {
          display: flex;
          align-items: center;
          font-size: 0.16rem;
          cursor: pointer;
          margin-bottom: 0.15rem;
          .yuan {
            width: 0.1rem;
            height: 0.1rem;
            border-radius: 50%;
            background: #000;
            margin-right: 0.1rem;
          }
          .yuan:hover {
            background: #e22a1f;
          }
        }
        .newList:hover {
          color: #e22a1f;
          .yuan {
            background: #e22a1f;
          }
        }
        .newClassList {
          color: #e22a1f;
          .yuan {
            background: #e22a1f;
          }
        }
        .longtext {
          color: #666666;
          font-size: 0.14rem;
          line-height: 0.3rem;
        }
      }
      .bomtext {
        color: #999999;
        font-size: 0.12rem;
        margin-top: 0.1rem;
        margin-left: 0.2rem;
      }
    }
  }
}
</style>
  <style scoped lang="scss">
@media screen and (max-width: 1300px) {
  .root {
    background: #fff;
    font-size: 12px;
    /deep/ .el-card {
      overflow: initial;
    }
    .mianbox {
      margin: 0 auto;
      width: 90%;
      height: 100%;
    }

    .bigContent {
      background: #f5f7f9;
      padding: 0.2rem 0;
      box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1) inset;
    }
    .contentBox {
      width: 60%;
      margin: auto;
      border-radius: 4px;
      display: flex;
      .listBox {
        width: 1.5rem;
        height: 0.46rem;
        line-height: 0.46rem;
        text-align: center;
        font-size: 0.14rem;
        cursor: pointer;
      }
      .newBox {
        color: #e22a1f;
      }
      .rightBox {
        flex: 1;
        margin-left: 0.2rem;
        .headerBox {
          display: flex;
          align-items: center;
          font-size: 0.18rem;
          font-weight: 700;
          .imgBOX {
            width: 0.24rem;
            height: 0.24rem;
            margin-right: 0.1rem;
          }
        }
        .newContent {
          display: flex;
          justify-content: space-between;
          padding: 0.2rem;
          min-height: 50vh;
          .box {
            width: 30%;
            margin-top: 0.4rem;
            .contents {
              position: relative;
              padding-top: 0.5rem;
              .imgBoxs {
                width: 0.92rem;
                height: 0.92rem;
                position: absolute;
                top: -0.6rem;
                left: 30%;
              }
              .titleBox {
                font-weight: 700;
                font-size: 0.18rem;
                text-align: center;
              }
              .textBox {
                font-size: 0.14rem;
                color: #666666;
                text-align: center;
                margin-top: 0.1rem;
              }
              .newIconBox {
                display: flex;
                justify-content: center;
                .iconImg {
                  width: 0.48rem;
                  height: 0.48rem;
                  margin-top: 0.3rem;
                }
              }
              .redText {
                color: #e22a1f;
                font-size: 0.28rem;
                text-align: center;
                font-weight: 500;
                margin-top: 0.3rem;
              }
              .timeBox {
                color: #999999;
                font-size: 0.12rem;
                text-align: center;
                margin-top: 0.1rem;
              }
              .erwerima {
                width: 1.34rem;
                height: 1.34rem;
                margin-top: 0.2rem;
              }
            }
          }
          .newList {
            display: flex;
            align-items: center;
            font-size: 0.16rem;
            cursor: pointer;
            margin-bottom: 0.15rem;
            .yuan {
              width: 0.1rem;
              height: 0.1rem;
              border-radius: 50%;
              background: #000;
              margin-right: 0.1rem;
            }
            .yuan:hover {
              background: #e22a1f;
            }
          }
          .newList:hover {
            color: #e22a1f;
            .yuan {
              background: #e22a1f;
            }
          }
          .newClassList {
            color: #e22a1f;
            .yuan {
              background: #e22a1f;
            }
          }
          .longtext {
            color: #666666;
            font-size: 0.14rem;
            line-height: 0.3rem;
          }
        }
        .bomtext {
          color: #999999;
          font-size: 0.12rem;
          margin-top: 0.1rem;
          margin-left: 0.2rem;
        }
      }
    }
  }
}
</style>
  